<!DOCTYPE HTML>
<html>
	<head>
		<title>Sign Up</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Easy Admin Panel Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<!-- Bootstrap Core CSS -->
		<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
		<!-- Custom CSS -->
		<link href="css/style.css" rel='stylesheet' type='text/css' />
		<!-- Graph CSS -->
		<link href="css/font-awesome.css" rel="stylesheet">
		<!-- jQuery -->
		<!-- lined-icons -->
		<link rel="stylesheet" href="css/icon-font.min.css" type='text/css' />
		<link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
		<!-- //lined-icons -->
		<!-- chart -->
		<script src="js/Chart.js"></script>
		<!-- //chart -->
		<!--animate-->
		<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
		<script src="js/wow.min.js"></script>
		<script>
			new WOW().init();
	</script>
		<!--//end-animate-->
		<!----webfonts--->
		<link href='http://fonts.googleapis.com/css?family=Cabin:400,400italic,500,500italic,600,600italic,700,700italic' rel='stylesheet'
		 type='text/css'>
		<!---//webfonts--->
		<!-- Meters graphs -->
		<script src="js/jquery-1.10.2.min.js"></script>
		<!-- Placed js at the end of the document so the pages load faster -->

	</head>

	<body class="sign-in-up">
		<section>
			<div id="page-wrapper" class="sign-in-wrapper">
				<div class="graphs">
					<div class="sign-up">
						<h3>Register Here</h3>
						<h5>Login Information</h5>
						<div class="sign-u">
							<div class="sign-up1">
								<h4>UserName* :</h4>
							</div>
							<div class="sign-up2">
								<form>
									<input id="username" maxlength="8" type="text" placeholder=" " required=" " />
								</form>
							</div>
							<div class="clearfix"> </div>
						</div>

						<div class="sign-u">
							<div class="sign-up1">
								<h4>Password* :</h4>
							</div>
							<div class="sign-up2">
								<form>
									<input id="password" type="password" placeholder=" " required=" " />
								</form>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="sign-u">
							<div class="sign-up1">
								<h4>Confirm Password* :</h4>
							</div>
							<div class="sign-up2">
								<form>
									<input id="repassword" type="password" placeholder=" " required=" " />
								</form>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="sub_home">
							<div class="sub_home_left">
								<input id="btn_submit" data-toggle="popover" data-trigger="manual" type="submit"
								 value="Submit">
							</div>
							<div class="sub_home_right">
								<p>Go Back to <a href="sign-in">Login</a></p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
			</div>
			<!--footer section start-->
			<footer>
				<p>Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</footer>
			<!--footer section end-->
		</section>

		<script src="js/jquery.nicescroll.js"></script>
		<script src="js/scripts.js"></script>
		<!-- Bootstrap Core JavaScript -->
		<script src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#btn_submit").click(function() {
					var username = $("#username").val();
					var password = $("#password").val();
					var repassword = $("#repassword").val();
					var data = {
						"username": username,
						"password": password,
						"repassword": repassword
					}
					console.log(data)
					$.post("register", data, function(resp) {
						$('#btn_submit').attr("data-content", resp.msg)
						$('#btn_submit').popover('show')
						setTimeout(function() {
							$('#btn_submit').popover('hide')
						}, 1500)
					})
				})
			})
		</script>
	</body>
</html>
